<template>
  <div>
    {{state}}
    <hr />
    {{state.linkList}}
    <YuFlow :node-list="state.nodeList" :link-list="state.linkList">
      <template #node-content="{ node }">
        <div style="width: 200px; height: 80px; border: 1px solid #000">
          <div>{{ node.id }}</div>
        </div>
      </template>
    </YuFlow>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, reactive, toRefs} from 'vue';
import { YuFlow, YuFlowLinkType, YuFlowNodeType } from '../src/index';

const id = () => Math.random().toString(32).substring(2);

interface IState {
  nodeList: YuFlowNodeType[];
  linkList: YuFlowLinkType[];
}

const state = reactive<IState>({
  nodeList: [],
  linkList: [],
});

onMounted(() => {
  state.nodeList = [
    {
      id: id(),
      left: '500px',
      top: '20px',
      params:[{
        source: true,
        anchor: 'Right',
      }]
    },
    {
      id: id(),
      left: '500px',
      top: '150px',
      params:[{
        target: true,
        anchor: 'Left',
      }]
    },
  ];
});
</script>
